<template>
	<view class="insert-store-page">
		<!-- 加载状态 -->
		<u-loading :show="loading" text="加载中..."></u-loading>

		<!-- 搜索栏 -->
		<view class="search-section" v-if="showSearch">
			<view class="search-box">
				<text class="search-icon">🔍</text>
				<input
					class="search-input"
					placeholder="搜索门店名称、区域或类型"
					v-model="searchKeyword"
					@input="handleSearch"
				/>
				<view class="search-clear" v-if="searchKeyword" @click="clearSearch">
					<text class="clear-icon">✕</text>
				</view>
			</view>
		</view>

		<!-- 省份切换区域 -->
		<view class="province-section">
			<view class="province-selector" @click="showProvincePickerAction">
				<text class="location-icon">📍</text>
				<text class="selector-text">切换省份</text>
				<text class="dropdown-icon">▼</text>
			</view>
			<view class="current-province">
				<text class="province-name">{{ selectedProvince }}</text>
			</view>
		</view>

		<!-- 统计数据区域 -->
		<view class="stats-section">
			<view class="stats-header">
				<text class="stats-title">本月新增门店数</text>
				<text class="info-icon">ⓘ</text>
			</view>
			<view class="stats-number">
				<text class="number">{{ statsData.monthlyNewStores }}</text>
				<text class="unit">家</text>
			</view>
		</view>

		<!-- 新增明细区域 -->
		<view class="detail-section">
			<view class="section-title">
				<view class="title-bar"></view>
				<text class="title-text">新增明细</text>
				<text class="info-icon">ⓘ</text>
				<view class="section-actions">
					<view class="action-btn" @click="toggleSearch">
						<text class="action-icon">🔍</text>
					</view>
				</view>
			</view>

			<view class="table-container">
				<!-- 表格头部 -->
				<view class="table-header">
					<view class="header-cell sequence-col">序号</view>
					<view class="header-cell name-col">门店名称</view>
					<view class="header-cell type-col">类型</view>
					<view class="header-cell region-col">区域</view>
					<view class="header-cell area-col">区域</view>
					<view class="header-cell date-col">日期</view>
				</view>

				<!-- 表格内容 -->
				<scroll-view
					class="table-content"
					scroll-y="true"
					:style="{ height: contentHeight + 'px' }"
					@scrolltolower="loadMore"
					:refresher-enabled="true"
					:refresher-triggered="refreshing"
					@refresherrefresh="onRefresh"
				>
					<view
						class="table-row"
						v-for="(item, index) in displayList"
						:key="item.id"
						:class="{ 'row-even': index % 2 === 1 }"
						@click="handleRowClick(item)"
					>
						<view class="table-cell sequence-col">{{ item.sequence }}</view>
						<view class="table-cell name-col">{{ item.storeName }}</view>
						<view class="table-cell type-col" :class="{'type-new': item.storeType === '新增', 'type-renewal': item.storeType === '续约', 'type-upgrade': item.storeType === '升级'}">{{ item.storeType }}</view>
						<view class="table-cell region-col">{{ item.region }}</view>
						<view class="table-cell area-col">{{ item.area }}</view>
						<view class="table-cell date-col">{{ item.date }}</view>
					</view>

					<!-- 加载更多 -->
					<view class="load-more" v-if="hasMore && displayList.length > 0">
						<view v-if="loadingMore" class="loading-circle">⟳</view>
						<text class="load-more-text">{{ loadingMore ? '加载中...' : '上拉加载更多' }}</text>
					</view>

					<!-- 没有更多数据 -->
					<view class="no-more" v-if="!hasMore && displayList.length > 0">
						<text class="no-more-text">没有更多数据了</text>
					</view>

					<!-- 空状态 -->
					<view class="empty-state" v-if="!loading && displayList.length === 0">
						<text class="empty-icon">🏪</text>
						<text class="empty-text">暂无新增门店</text>
						<view class="empty-btn" @click="onRefresh">
							<text class="empty-btn-text">重新加载</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 统计信息 -->
		<view class="summary-section" v-if="displayList.length > 0">
			<view class="summary-item">
				<text class="summary-label">总门店:</text>
				<text class="summary-value">{{ totalStores }}</text>
			</view>
			<view class="summary-item">
				<text class="summary-label">新增:</text>
				<text class="summary-value new-text">{{ newStoresCount }}</text>
			</view>
			<view class="summary-item">
				<text class="summary-label">续约:</text>
				<text class="summary-value renewal-text">{{ renewalStoresCount }}</text>
			</view>
			<view class="summary-item">
				<text class="summary-label">升级:</text>
				<text class="summary-value upgrade-text">{{ upgradeStoresCount }}</text>
			</view>
		</view>

		<!-- 门店详情弹窗 -->
		<u-popup
			v-model="showDetailPopup"
			mode="bottom"
			height="70%"
			border-radius="20"
		>
			<view class="detail-popup">
				<view class="popup-header">
					<text class="popup-title">门店详情</text>
					<view class="popup-close" @click="showDetailPopup = false">
						<text class="close-icon">✕</text>
					</view>
				</view>

				<view class="popup-content" v-if="selectedItem">
					<view class="detail-item">
						<text class="detail-label">序号:</text>
						<text class="detail-value">{{ selectedItem.sequence }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">门店名称:</text>
						<text class="detail-value">{{ selectedItem.storeName }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">门店类型:</text>
						<text class="detail-value" :class="{'type-new': selectedItem.storeType === '新增', 'type-renewal': selectedItem.storeType === '续约', 'type-upgrade': selectedItem.storeType === '升级'}">{{ selectedItem.storeType }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">所属区域:</text>
						<text class="detail-value">{{ selectedItem.region }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">区域编号:</text>
						<text class="detail-value">{{ selectedItem.area }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">省份城市:</text>
						<text class="detail-value">{{ selectedItem.province }} {{ selectedItem.city }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">详细地址:</text>
						<text class="detail-value">{{ selectedItem.address }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">联系人:</text>
						<text class="detail-value">{{ selectedItem.contactPerson }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">联系电话:</text>
						<text class="detail-value">{{ selectedItem.contactPhone }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">营业执照:</text>
						<text class="detail-value">{{ selectedItem.businessLicense }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">审核状态:</text>
						<text class="detail-value" :class="selectedItem.status === '已审核' ? 'approved' : 'pending'">{{ selectedItem.status }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">创建时间:</text>
						<text class="detail-value">{{ selectedItem.createTime }}</text>
					</view>
					<view class="detail-item" v-if="selectedItem.remark">
						<text class="detail-label">备注:</text>
						<text class="detail-value">{{ selectedItem.remark }}</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import insertStoreMixin from '../../mixins/insertStoreMixin'

export default {
	name: 'InsertStorePage',
	mixins: [insertStoreMixin],
	data() {
		return {
			// 页面特有的数据可以在这里添加
		}
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.insert-store-page {
	min-height: 100vh;
	background-color: #f5f6fa;

	.search-section {
		padding: 15px 20px;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;

		.search-box {
			display: flex;
			align-items: center;
			background-color: #f8f9fa;
			border-radius: 20px;
			padding: 8px 15px;

			.search-icon {
				font-size: 16px;
				margin-right: 8px;
			}

			.search-input {
				flex: 1;
				font-size: 14px;
				color: #333;
			}

			.search-clear {
				margin-left: 10px;

				.clear-icon {
					font-size: 14px;
					color: #999;
				}
			}
		}
	}

	.province-section {
		background-color: #fff;
		padding: 15px 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;

		.province-selector {
			display: flex;
			align-items: center;

			.location-icon {
				font-size: 16px;
				margin-right: 8px;
				color: #007aff;
			}

			.selector-text {
				font-size: 14px;
				color: #666;
				margin-right: 8px;
			}

			.dropdown-icon {
				font-size: 12px;
				color: #999;
			}
		}

		.current-province {
			.province-name {
				font-size: 16px;
				font-weight: 500;
				color: #333;
			}
		}
	}

	.stats-section {
		background-color: #fff;
		margin: 10px 20px;
		border-radius: 8px;
		padding: 20px;
		text-align: center;

		.stats-header {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 15px;

			.stats-title {
				font-size: 14px;
				color: #666;
				margin-right: 8px;
			}

			.info-icon {
				font-size: 14px;
				color: #999;
			}
		}

		.stats-number {
			display: flex;
			align-items: baseline;
			justify-content: center;

			.number {
				font-size: 36px;
				font-weight: bold;
				color: #ff4757;
			}

			.unit {
				font-size: 18px;
				color: #333;
				margin-left: 8px;
			}
		}
	}

	.detail-section {
		margin: 10px 20px 20px;
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;

		.section-title {
			display: flex;
			align-items: center;
			padding: 15px 20px;
			background-color: #f8f9fa;
			border-bottom: 1px solid #e5e5e5;

			.title-bar {
				width: 4px;
				height: 16px;
				background-color: #007aff;
				border-radius: 2px;
				margin-right: 10px;
			}

			.title-text {
				flex: 1;
				font-size: 16px;
				font-weight: 500;
				color: #333;
			}

			.info-icon {
				font-size: 16px;
				color: #999;
				margin-left: 8px;
			}

			.section-actions {
				display: flex;
				align-items: center;
				margin-left: 10px;

				.action-btn {
					width: 30px;
					height: 30px;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 15px;
					background-color: #f0f0f0;

					.action-icon {
						font-size: 14px;
						color: #666;
					}

					&:active {
						background-color: #e0e0e0;
					}
				}
			}
		}
	}

	.table-container {
		.table-header {
			display: flex;
			background-color: #f8f9fa;
			border-bottom: 1px solid #e5e5e5;

			.header-cell {
				padding: 12px 8px;
				font-size: 13px;
				font-weight: 400;
				color: #999;
				text-align: center;

				&.sequence-col {
					flex: 0.6;
				}

				&.name-col {
					flex: 1;
				}

				&.type-col {
					flex: 0.8;
				}

				&.region-col {
					flex: 1.2;
				}

				&.area-col {
					flex: 0.6;
				}

				&.date-col {
					flex: 0.8;
				}
			}
		}

		.table-content {
			.table-row {
				display: flex;
				border-bottom: 1px solid #f0f0f0;

				&.row-even {
					background-color: #fafbfc;
				}

				&:active {
					background-color: #e3f2fd;
				}

				&:last-child {
					border-bottom: none;
				}

				.table-cell {
					padding: 12px 8px;
					font-size: 13px;
					color: #333;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;

					&.sequence-col {
						flex: 0.6;
						color: #666;
					}

					&.name-col {
						flex: 1;
						color: #333;
					}

					&.type-col {
						flex: 0.8;

						&.type-new {
							color: #ff4757;
						}

						&.type-renewal {
							color: #2ed573;
						}

						&.type-upgrade {
							color: #007aff;
						}
					}

					&.region-col {
						flex: 1.2;
						color: #333;
					}

					&.area-col {
						flex: 0.6;
						color: #666;
					}

					&.date-col {
						flex: 0.8;
						color: #666;
					}
				}
			}

			.load-more {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20px;

				.loading-circle {
					font-size: 16px;
					color: #007aff;
					margin-right: 8px;
					animation: rotate 1s linear infinite;
				}

				.load-more-text {
					font-size: 12px;
					color: #999;
				}
			}

			.no-more {
				display: flex;
				justify-content: center;
				padding: 20px;

				.no-more-text {
					font-size: 12px;
					color: #999;
				}
			}

			.empty-state {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 60px 20px;

				.empty-icon {
					font-size: 48px;
					margin-bottom: 15px;
				}

				.empty-text {
					font-size: 14px;
					color: #999;
					margin-bottom: 20px;
				}

				.empty-btn {
					background-color: #007aff;
					color: #fff;
					padding: 8px 20px;
					border-radius: 16px;

					.empty-btn-text {
						font-size: 12px;
						color: #fff;
					}
				}
			}
		}
	}

	.summary-section {
		background-color: #fff;
		margin: 0 20px 20px;
		border-radius: 8px;
		padding: 15px;
		display: flex;
		justify-content: space-around;

		.summary-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.summary-label {
				font-size: 12px;
				color: #666;
				margin-bottom: 5px;
			}

			.summary-value {
				font-size: 16px;
				font-weight: bold;
				color: #333;

				&.new-text {
					color: #ff4757;
				}

				&.renewal-text {
					color: #2ed573;
				}

				&.upgrade-text {
					color: #007aff;
				}
			}
		}
	}

	.detail-popup {
		.popup-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20px;
			border-bottom: 1px solid #f0f0f0;

			.popup-title {
				font-size: 16px;
				font-weight: bold;
				color: #333;
			}

			.popup-close {
				width: 30px;
				height: 30px;
				display: flex;
				align-items: center;
				justify-content: center;

				.close-icon {
					font-size: 16px;
					color: #666;
				}
			}
		}

		.popup-content {
			padding: 20px;
			max-height: 400px;
			overflow-y: auto;

			.detail-item {
				display: flex;
				align-items: center;
				padding: 12px 0;
				border-bottom: 1px solid #f8f9fa;

				&:last-child {
					border-bottom: none;
				}

				.detail-label {
					width: 100px;
					font-size: 14px;
					color: #666;
					flex-shrink: 0;
				}

				.detail-value {
					flex: 1;
					font-size: 14px;
					color: #333;

					&.type-new {
						color: #ff4757;
					}

					&.type-renewal {
						color: #2ed573;
					}

					&.type-upgrade {
						color: #007aff;
					}

					&.approved {
						color: #2ed573;
					}

					&.pending {
						color: #ff9500;
					}
				}
			}
		}
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
</style>